<template>
  <view class="container">
    <view class="line-up-success">
      <view class="header">
        <view class="flex flex-ai-c flex-jc-c">
          <image class="icon-success" src="https://files.yzsheng.com/client/commodity/gougou.png"></image>
        </view>
        <view class="tips"><text>排队取号成功</text></view>
        <view class="info"><text>领号日期：{{time}}</text></view>
        <view class="info"><text>领号门店：{{queueInfo.store.storeName}}</text></view>
      </view>
      <view class="result-box">
        <view class="cell" v-for="(item, index) in queueInfo.queue" :key="index">
          <view class="title">
            <text>服务类型：</text>
            <text class="strong">{{item.name}}</text>
          </view>
          <view class="queuing-order">
            <text>排号：</text>
            <text class="strong">{{item.value}}</text>
          </view>
          <view class="before">
            <text>在您之前还有<text class="red">0</text>辆车正在等候，请您耐心等待</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="footer">
      <text class="tips">如有任何问题，请与门店联系</text>
      <view class="btn flex flex-ai-c flex-jc-c" @click="onSubmit">
        <text class="text">朕知道了</text>
      </view>
    </view>
    
  </view>
</template>

<script>
const dayjs = require('@/utils/dayjs.js')
export default {
  data() {
    return {
      time: dayjs().format('YYYY-MM-DD')
    }
  },
  computed: {
    queueInfo() {
      return this.$store.state.queueInfo
    }
  },
  onLoad() {
  },
  methods: {
    onSubmit() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style lang="scss">
page{
  background-color: #f6f6f6;
}
.container{
  overflow: hidden;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .line-up-success{
    background-color: #fff; 
    padding: 0 32rpx;
  }
  .header{
    padding: 50rpx 0;
    border-bottom: 2rpx solid #eee;
    .icon-success{
      width: 250rpx;
      height: 250rpx;
    }
    .tips{
      font-size: 36rpx;
      color: #666;
      text-align: center;
      font-weight: bold;
      margin-bottom: 30rpx;
    }
    .info{
      font-size: 26rpx;
      color: #666;
      line-height: 44rpx;
      padding: 6rpx 0;
    }
  }
  .result-box{
    .cell{
      padding: 50rpx 0;
      .title{
        display: flex;
        align-items: center;
        color: #666;
        font-size: 28rpx;
        .strong{
          color: #333;
        }
      }
      .queuing-order{
        text-align: center;
        font-size: 32rpx;
        color: #333;
        padding: 50rpx 0;
        .strong{
          font-size: 48rpx;
          font-weight: bold;
        }
      }
      .before{
        text-align: center;
        font-size: 28rpx;
        color: #999;
        .red{
          color: #FF4B44;
        }
      }
    }
  }
  .footer{
    text-align: center;
    margin-top: 70rpx;
    padding-bottom: 30rpx;
    .tips{
      font-size: 26rpx;
      color: #666;
    }
    .btn{
      margin: 24rpx;
      height: 88rpx;
      background: linear-gradient(0deg, #FBD220, #FFE23E);
      border-radius: 44rpx;
      .text{
        font-size: 30rpx;
        color: #3d3d3d;
      }
    }
  }
}
</style>
